<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>echarts常用组件 | html5中文文档</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../md/echarts/lesson4.html" />
    
    
    <link rel="prev" href="../../md/echarts/lesson2.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="2.2"
        data-chapter-title="echarts常用组件"
        data-filepath="md/echarts/lesson3.md"
        data-basepath="../.."
        data-revision="Fri Dec 14 2018 11:56:27 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="md/html/html.html">
            
                
                    <a href="../../md/html/html.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        html5的介绍
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="md/html/hbuilder的使用.html">
            
                
                    <a href="../../md/html/hbuilder的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        开发工具的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="md/html/lesson0.html">
            
                
                    <a href="../../md/html/lesson0.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        html5的介绍和结构分析
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="md/html/lesson1.html">
            
                
                    <a href="../../md/html/lesson1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        常用标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="md/html/lesson2.html">
            
                
                    <a href="../../md/html/lesson2.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        图片音频视频
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="md/html/lesson3.html">
            
                
                    <a href="../../md/html/lesson3.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.5.</b>
                        
                        列表表格
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="md/html/lesson4.html">
            
                
                    <a href="../../md/html/lesson4.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.6.</b>
                        
                        表单元素
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="md/html/lesson5.html">
            
                
                    <a href="../../md/html/lesson5.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.7.</b>
                        
                        h5新增特性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="md/html/lesson6.html">
            
                
                    <a href="../../md/html/lesson6.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.8.</b>
                        
                        h5新增特性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="md/html/lesson7.html">
            
                
                    <a href="../../md/html/lesson7.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.9.</b>
                        
                        h5新增特性
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="md/echarts/lesson1.html">
            
                
                    <a href="../../md/echarts/lesson1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        echarts的介绍
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="md/echarts/lesson2.html">
            
                
                    <a href="../../md/echarts/lesson2.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        echarts快速上手
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="2.2" data-path="md/echarts/lesson3.html">
            
                
                    <a href="../../md/echarts/lesson3.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        echarts常用组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="md/echarts/lesson4.html">
            
                
                    <a href="../../md/echarts/lesson4.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        echarts常用图表
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >html5中文文档</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="echarts&#x7684;&#x5E38;&#x7528;&#x7EC4;&#x4EF6;">echarts&#x7684;&#x5E38;&#x7528;&#x7EC4;&#x4EF6;</h1>
<h2 id="&#x4E00;&#x3001;&#x6807;&#x9898;&#x7EC4;&#x4EF6;title">&#x4E00;&#x3001;&#x6807;&#x9898;&#x7EC4;&#x4EF6;title</h2>
<p>&#x6807;&#x9898;&#x7EC4;&#x4EF6;&#xFF0C;&#x5305;&#x542B;&#x4E3B;&#x6807;&#x9898;&#x548C;&#x526F;&#x6807;&#x9898;&#x3002;&#x4EE5;&#x4E0B;&#x662F;&#x4E00;&#x4E9B;&#x5E38;&#x7528;&#x5C5E;&#x6027;&#xFF1A;</p>
<ol>
<li>text:&#x4E3B;&#x6807;&#x9898;&#x6587;&#x672C;&#xFF0C;&#x652F;&#x6301;&#x7528;\n&#x6362;&#x884C;</li>
<li>link:&#x4E3B;&#x9898;&#x6587;&#x672C;&#x8D85;&#x94FE;&#x63A5;</li>
<li>target:&#x6307;&#x5B9A;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#x4E3B;&#x6807;&#x9898;&#x8D85;&#x94FE;&#x63A5;&#xFF0C;&#x53EF;&#x9009;&#xFF0C;self &#x5F53;&#x524D;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#xFF0C;blank &#x65B0;&#x7A97;&#x53E3;&#x6253;&#x5F00;</li>
<li>textStyle:object&#xFF0C;&#x6307;&#x5B9A;&#x4E3B;&#x6807;&#x9898;&#x6837;&#x5F0F;</li>
<li>subtext:&#x526F;&#x6807;&#x9898;&#x6587;&#x672C;&#xFF0C;&#x652F;&#x6301;\n&#x6362;&#x884C;</li>
<li>sublink:&#x526F;&#x6807;&#x9898;&#x6587;&#x672C;&#x8D85;&#x94FE;&#x63A5;</li>
<li>subtarget:&#x6307;&#x5B9A;&#x7A97;&#x53E3;&#x6253;&#x5F00;&#x526F;&#x6807;&#x9898;&#x8D85;&#x94FE;&#x63A5;</li>
<li>subtextStyle:object&#xFF0C;&#x526F;&#x6807;&#x9898;&#x6837;&#x5F0F;</li>
<li>padding&#xFF1A;&#x6807;&#x9898;&#x5185;&#x8FB9;&#x8DDD;&#xFF0C;&#x9ED8;&#x8BA4;5px&#xFF0C;&#x63A5;&#x53D7;&#x6570;&#x7EC4;&#x5206;&#x522B;&#x8BBE;&#x5B9A;&#x4E0A;&#x53F3;&#x4E0B;&#x5DE6;&#x8FB9;&#x8DDD;&#x3002;</li>
<li>itemGap:&#x4E3B;&#x526F;&#x6807;&#x9898;&#x4E4B;&#x95F4;&#x7684;&#x8DDD;&#x79BB;</li>
</ol>
<h2 id="&#x4E8C;&#x3001;&#x5DE5;&#x5177;&#x7BB1;&#x7EC4;&#x4EF6;toolbox">&#x4E8C;&#x3001;&#x5DE5;&#x5177;&#x7BB1;&#x7EC4;&#x4EF6;toolbox</h2>
<ol>
<li>orient:&#x5DE5;&#x5177;&#x7BB1;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x5411;&#xFF0C;horizontal =&gt; &#x6C34;&#x5E73;&#x65B9;&#x5411; &#xFF0C;vertical =&gt; &#x5782;&#x76F4;&#x65B9;&#x5411;</li>
<li>itemSize:&#x5DE5;&#x5177;&#x680F;icon&#x7684;&#x5927;&#x5C0F;&#xFF0C;&#x9ED8;&#x8BA4;15</li>
<li>itemGap:&#x5DE5;&#x5177;&#x680F;icon&#x6BCF;&#x9879;&#x4E4B;&#x95F4;&#x7684;&#x95F4;&#x9694;&#x3002;</li>
<li>showTitle:&#x662F;&#x5426;&#x5728;&#x9F20;&#x6807;hover&#x7684;&#x65F6;&#x5019;&#x663E;&#x793A;&#x6BCF;&#x4E2A;&#x5DE5;&#x5177;icon&#x7684;&#x6807;&#x9898;</li>
<li>feature:object&#xFF0C;&#x5404;&#x5DE5;&#x5177;&#x914D;&#x7F6E;&#x9879;&#xFF0C;&#x5982;&#x4E0B;&#xFF1A;</li>
</ol>
<blockquote>
<p>(1)&#x3001;saveAsImage:&#x5C06;&#x56FE;&#x8868;&#x4FDD;&#x5B58;&#x4E3A;&#x56FE;&#x7247;</p>
<blockquote>
<p>type:&#x56FE;&#x7247;&#x7C7B;&#x578B; &#xFF0C;&#x652F;&#x6301; &apos;png&apos; &#x548C; &apos;jpeg&apos;&#x3002;</p>
<p>name:&#x4FDD;&#x5B58;&#x7684;&#x6587;&#x4EF6;&#x540D;&#x79F0;&#xFF0C;&#x9ED8;&#x8BA4;&#x4F7F;&#x7528;title.text&#x4F5C;&#x4E3A;&#x540D;&#x79F0;</p>
<p>backgroundColor:&#x4FDD;&#x5B58;&#x7684;&#x56FE;&#x7247;&#x80CC;&#x666F;&#x6837;&#x5F0F;</p>
<p>excludeComponents:&#x4FDD;&#x5B58;&#x4E3A;&#x56FE;&#x7247;&#x65F6;&#x5FFD;&#x7565;&#x7684;&#x7EC4;&#x4EF6;&#x5217;&#x8868;&#xFF0C;&#x9ED8;&#x8BA4;&#x5FFD;&#x7565;&#x5DE5;&#x5177;&#x680F;&#x3002;</p>
<p>pixelRatio:&#x4FDD;&#x5B58;&#x56FE;&#x7247;&#x7684;&#x5206;&#x8FA8;&#x7387;&#x6BD4;&#x4F8B;&#xFF0C;&#x9ED8;&#x8BA4;&#x8DDF;&#x5BB9;&#x5668;&#x76F8;&#x540C;&#x5927;&#x5C0F;&#xFF0C;&#x5982;&#x679C;&#x9700;&#x8981;&#x4FDD;&#x5B58;&#x66F4;&#x9AD8;&#x5206;&#x8FA8;&#x7387;&#x7684;&#xFF0C;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x4E3A;&#x5927;&#x4E8E; 1 &#x7684;&#x503C;&#xFF0C;&#x4F8B;&#x5982; 2&#x3002;</p>
</blockquote>
<p>(2)&#x3001;restore:&#x914D;&#x7F6E;&#x9879;&#x8FD8;&#x539F;</p>
<blockquote>
<p>title:&#x6807;&#x9898;</p>
</blockquote>
<p>(3)&#x3001;dataView:&#x6570;&#x636E;&#x89C6;&#x56FE;&#x5DE5;&#x5177;&#xFF0C;&#x53EF;&#x4EE5;&#x5C55;&#x73B0;&#x5F53;&#x524D;&#x56FE;&#x8868;&#x6240;&#x7528;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x7F16;&#x8F91;&#x540E;&#x53EF;&#x4EE5;&#x52A8;&#x6001;&#x66F4;&#x65B0;&#x3002;</p>
<p>(4)&#x3001;dataZoom:&#x6570;&#x636E;&#x533A;&#x57DF;&#x7F29;&#x653E;&#x3002;&#x76EE;&#x524D;&#x53EA;&#x652F;&#x6301;&#x76F4;&#x89D2;&#x5750;&#x6807;&#x7CFB;&#x7684;&#x7F29;&#x653E;&#x3002;</p>
<p>(5)&#x3001;magicType:&#x52A8;&#x6001;&#x7C7B;&#x578B;&#x5207;&#x6362;&#xFF0C;&#x793A;&#x4F8B;&#xFF1A;</p>
<pre><code class="lang-js">feature: {
    magicType: {
        type: [<span class="hljs-string">&apos;line&apos;</span>, <span class="hljs-string">&apos;bar&apos;</span>, <span class="hljs-string">&apos;stack&apos;</span>, <span class="hljs-string">&apos;tiled&apos;</span>]
    }
}
</code></pre>
<p>(6)brush:&#x9009;&#x6846;&#x7EC4;&#x4EF6;&#x7684;&#x63A7;&#x5236;&#x6309;&#x94AE;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-string">&apos;rect&apos;</span>&#xFF1A;&#x5F00;&#x542F;&#x77E9;&#x5F62;&#x9009;&#x6846;&#x9009;&#x62E9;&#x529F;&#x80FD;&#x3002;
<span class="hljs-string">&apos;polygon&apos;</span>&#xFF1A;&#x5F00;&#x542F;&#x4EFB;&#x610F;&#x5F62;&#x72B6;&#x9009;&#x6846;&#x9009;&#x62E9;&#x529F;&#x80FD;&#x3002;
<span class="hljs-string">&apos;lineX&apos;</span>&#xFF1A;&#x5F00;&#x542F;&#x6A2A;&#x5411;&#x9009;&#x62E9;&#x529F;&#x80FD;&#x3002;
<span class="hljs-string">&apos;lineY&apos;</span>&#xFF1A;&#x5F00;&#x542F;&#x7EB5;&#x5411;&#x9009;&#x62E9;&#x529F;&#x80FD;&#x3002;
<span class="hljs-string">&apos;keep&apos;</span>&#xFF1A;&#x5207;&#x6362;&#x300E;&#x5355;&#x9009;&#x300F;&#x548C;&#x300E;&#x591A;&#x9009;&#x300F;&#x6A21;&#x5F0F;&#x3002;&#x540E;&#x8005;&#x53EF;&#x652F;&#x6301;&#x540C;&#x65F6;&#x753B;&#x591A;&#x4E2A;&#x9009;&#x6846;&#x3002;&#x524D;&#x8005;&#x652F;&#x6301;&#x5355;&#x51FB;&#x6E05;&#x9664;&#x6240;&#x6709;&#x9009;&#x6846;&#x3002;
<span class="hljs-string">&apos;clear&apos;</span>&#xFF1A;&#x6E05;&#x7A7A;&#x6240;&#x6709;&#x9009;&#x6846;&#x3002;
</code></pre>
</blockquote>
<h2 id="&#x4E09;&#x3001;&#x63D0;&#x793A;&#x6846;&#x7EC4;&#x4EF6;tooltip&#x3002;">&#x4E09;&#x3001;&#x63D0;&#x793A;&#x6846;&#x7EC4;&#x4EF6;tooltip&#x3002;</h2>
<p>&#x63D0;&#x793A;&#x6846;&#x7EC4;&#x4EF6;&#xFF0C;&#x5F53;&#x6211;&#x4EEC;&#x7528;&#x9F20;&#x6807;&#x6ED1;&#x52A8;&#x5230;&#x56FE;&#x8868;&#x4E0A;&#x65B9;&#x662F;&#xFF0C;&#x4F1A;&#x5F39;&#x51FA;&#x63D0;&#x793A;&#x6846;&#x663E;&#x793A;&#x8BE5;&#x4F4D;&#x7F6E;&#x4E0B;&#x5BF9;&#x5E94;&#x7684;&#x6570;&#x636E;</p>
<ol>
<li>trigger&#x89E6;&#x53D1;&#x7C7B;&#x578B;
 item&#xFF1A;&#x6570;&#x636E;&#x9879;&#x56FE;&#x5F62;&#x89E6;&#x53D1;&#xFF0C;&#x4E3B;&#x8981;&#x5728;&#x6563;&#x70B9;&#x56FE;&#xFF0C;&#x997C;&#x56FE;&#x7B49;&#x65E0;&#x7C7B;&#x76EE;&#x8F74;&#x7684;&#x56FE;&#x8868;&#x4E2D;&#x4F7F;&#x7528;&#x3002;
 &apos;axis&apos;&#xFF1A;&#x5750;&#x6807;&#x8F74;&#x89E6;&#x53D1;&#xFF0C;&#x4E3B;&#x8981;&#x5728;&#x67F1;&#x72B6;&#x56FE;&#xFF0C;&#x6298;&#x7EBF;&#x56FE;&#x7B49;&#x4F1A;&#x4F7F;&#x7528;&#x7C7B;&#x76EE;&#x8F74;&#x7684;&#x56FE;&#x8868;&#x4E2D;&#x4F7F;&#x7528;&#x3002;</li>
<li>formatter&#xFF0C;&#x63D0;&#x793A;&#x6846;&#x6D6E;&#x5C42;&#x5185;&#x5BB9;&#x683C;&#x5F0F;&#x5668;&#xFF0C;&#x652F;&#x6301;&#x5B57;&#x7B26;&#x4E32;&#x6A21;&#x677F;&#x548C;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x4E24;&#x79CD;&#x5F62;&#x5F0F;&#x3002;</li>
</ol>
<p><img src="img/1.png" alt="formatter"></p>
<p>&#x793A;&#x4F8B;&#xFF1A;</p>
<pre><code class="lang-js">formatter: <span class="hljs-string">&apos;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&apos;</span>
</code></pre>
<h2 id="&#x56DB;&#x3001;&#x56FE;&#x4F8B;&#x7EC4;&#x4EF6;legend">&#x56DB;&#x3001;&#x56FE;&#x4F8B;&#x7EC4;&#x4EF6;legend</h2>
<p>&#x56FE;&#x4F8B;&#x7EC4;&#x4EF6;&#x5C55;&#x73B0;&#x4E86;&#x4E0D;&#x540C;&#x7CFB;&#x5217;&#x7684;&#x6807;&#x8BB0;(symbol)&#xFF0C;&#x989C;&#x8272;&#x548C;&#x540D;&#x5B57;&#x3002;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x70B9;&#x51FB;&#x56FE;&#x4F8B;&#x63A7;&#x5236;&#x54EA;&#x4E9B;&#x7CFB;&#x5217;&#x4E0D;&#x663E;&#x793A;&#x3002;</p>
<ol>
<li>type:&#x56FE;&#x4F8B;&#x7C7B;&#x578B;<pre><code class="lang-js"><span class="hljs-string">&apos;plain&apos;</span>&#xFF1A;&#x666E;&#x901A;&#x56FE;&#x4F8B;&#x3002;&#x7F3A;&#x7701;&#x5C31;&#x662F;&#x666E;&#x901A;&#x56FE;&#x4F8B;&#x3002;
<span class="hljs-string">&apos;scroll&apos;</span>&#xFF1A;&#x53EF;&#x6EDA;&#x52A8;&#x7FFB;&#x9875;&#x7684;&#x56FE;&#x4F8B;&#x3002;&#x5F53;&#x56FE;&#x4F8B;&#x6570;&#x91CF;&#x8F83;&#x591A;&#x65F6;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x3002;
</code></pre>
</li>
<li>data[{}],&#x56FE;&#x4F8B;&#x7684;&#x6570;&#x636E;&#x6570;&#x7EC4;&#x3002;
&#x56FE;&#x4F8B;&#x7684;&#x6570;&#x636E;&#x6570;&#x7EC4;&#x3002;&#x6570;&#x7EC4;&#x9879;&#x901A;&#x5E38;&#x4E3A;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x6BCF;&#x4E00;&#x9879;&#x4EE3;&#x8868;&#x4E00;&#x4E2A;&#x7CFB;&#x5217;&#x7684; name&#xFF08;&#x5982;&#x679C;&#x662F;&#x997C;&#x56FE;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;&#x997C;&#x56FE;&#x5355;&#x4E2A;&#x6570;&#x636E;&#x7684; name&#xFF09;&#x3002;&#x56FE;&#x4F8B;&#x7EC4;&#x4EF6;&#x4F1A;&#x81EA;&#x52A8;&#x6839;&#x636E;&#x5BF9;&#x5E94;&#x7CFB;&#x5217;&#x7684;&#x56FE;&#x5F62;&#x6807;&#x8BB0;&#xFF08;symbol&#xFF09;&#x6765;&#x7ED8;&#x5236;&#x81EA;&#x5DF1;&#x7684;&#x989C;&#x8272;&#x548C;&#x6807;&#x8BB0;&#xFF0C;&#x7279;&#x6B8A;&#x5B57;&#x7B26;&#x4E32; &apos;&apos;&#xFF08;&#x7A7A;&#x5B57;&#x7B26;&#x4E32;&#xFF09;&#x6216;&#x8005; &apos;\n&apos;&#xFF08;&#x6362;&#x884C;&#x5B57;&#x7B26;&#x4E32;&#xFF09;&#x7528;&#x4E8E;&#x56FE;&#x4F8B;&#x7684;&#x6362;&#x884C;&#x3002;</li>
</ol>
<p>&#x5982;&#x679C; data &#x6CA1;&#x6709;&#x88AB;&#x6307;&#x5B9A;&#xFF0C;&#x4F1A;&#x81EA;&#x52A8;&#x4ECE;&#x5F53;&#x524D;&#x7CFB;&#x5217;&#x4E2D;&#x83B7;&#x53D6;&#x3002;</p>
<p>&#x5982;&#x679C;&#x8981;&#x8BBE;&#x7F6E;&#x5355;&#x72EC;&#x4E00;&#x9879;&#x7684;&#x6837;&#x5F0F;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x628A;&#x8BE5;&#x9879;&#x5199;&#x6210;&#x914D;&#x7F6E;&#x9879;&#x5BF9;&#x8C61;&#x3002;&#x6B64;&#x65F6;&#x5FC5;&#x987B;&#x4F7F;&#x7528; name &#x5C5E;&#x6027;&#x5BF9;&#x5E94;&#x8868;&#x793A;&#x7CFB;&#x5217;&#x7684; name&#x3002;</p>
<p>&#x793A;&#x4F8B;</p>
<pre><code class="lang-js">data: [{
    name: <span class="hljs-string">&apos;&#x7CFB;&#x5217;1&apos;</span>,
    <span class="hljs-comment">// &#x5F3A;&#x5236;&#x8BBE;&#x7F6E;&#x56FE;&#x5F62;&#x4E3A;&#x5706;&#x3002;</span>
    icon: <span class="hljs-string">&apos;circle&apos;</span>,
    <span class="hljs-comment">// &#x8BBE;&#x7F6E;&#x6587;&#x672C;&#x4E3A;&#x7EA2;&#x8272;</span>
    textStyle: {
        color: <span class="hljs-string">&apos;red&apos;</span>
    }
}]
</code></pre>
<h2 id="&#x4E94;&#x3001;&#x7CFB;&#x5217;&#x5217;&#x8868;series">&#x4E94;&#x3001;&#x7CFB;&#x5217;&#x5217;&#x8868;,series</h2>
<p>&#x7CFB;&#x5217;&#x5217;&#x8868;&#x3002;&#x6BCF;&#x4E2A;&#x7CFB;&#x5217;&#x901A;&#x8FC7; type &#x51B3;&#x5B9A;&#x81EA;&#x5DF1;&#x7684;&#x56FE;&#x8868;&#x7C7B;&#x578B;</p>
<ol>
<li>name:&#x7CFB;&#x5217;&#x540D;&#x79F0;&#xFF0C;&#x7528;&#x4E8E;tooltip&#x7684;&#x663E;&#x793A;&#xFF0C;legend &#x7684;&#x56FE;&#x4F8B;&#x7B5B;&#x9009;&#xFF0C;&#x5728; setOption &#x66F4;&#x65B0;&#x6570;&#x636E;&#x548C;&#x914D;&#x7F6E;&#x9879;&#x65F6;&#x7528;&#x4E8E;&#x6307;&#x5B9A;&#x5BF9;&#x5E94;&#x7684;&#x7CFB;&#x5217;&#x3002;</li>
<li>type:&#x6307;&#x5B9A;&#x56FE;&#x8868;&#x7C7B;&#x578B;</li>
</ol>
<p><a href="http://echarts.baidu.com/option.html#title" target="_blank">&#x8BE6;&#x7EC6;&#x914D;&#x7F6E;&#xFF0C;&#x70B9;&#x51FB;&#x6211;&#x67E5;&#x770B;</a></p>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../md/echarts/lesson2.html" class="navigation navigation-prev " aria-label="Previous page: echarts快速上手"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../md/echarts/lesson4.html" class="navigation navigation-next " aria-label="Next page: echarts常用图表"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
